<template>
	<div>
		<!-- <view style="background-color: #ffffff;margin: 10px;border-radius: 12px;">
			<uni-table ref="table" :loading="loading" border stripe  emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center">序号</uni-th>
					<uni-th width="50" align="center">货号</uni-th>
					<uni-th width="70" align="center">货物名称</uni-th>
					<uni-th width="50" align="center">物品描述</uni-th>
					<uni-th width="50" align="center">上市时间</uni-th>
					<uni-th width="50" align="center">完成出货量（吨）</uni-th>
					<uni-th width="50" align="center">运单量</uni-th>
					<uni-th width="50" align="center">交易额（万元）</uni-th>
					<uni-th width="50" align="center">完成退货量（吨）</uni-th>
					<uni-th width="50" align="center">退货运单量</uni-th>
					<uni-th width="50" align="center">退货交易金额（元）</uni-th>
					<uni-th width="50" align="center">运单退货率</uni-th>
					<uni-th width="50" align="center">时间范围</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in list" :key="index">
					<uni-td align="center">{{ (pageCurrent-1)*pageSize+index+1 }}</uni-td>
					<uni-td align="center">{{ item.goodCode }}</uni-td>
					<uni-td align="center">{{ item.goodsName }}</uni-td>
					<uni-td align="center">{{ item.goodsDesc }}</uni-td>
					<uni-td align="center">{{ item.marketTime }}</uni-td>
					<uni-td align="center">{{ item.finishShipQuality }}</uni-td>
					<uni-td align="center">{{ item.waybillNum }}</uni-td>
					<uni-td align="center">{{ item.tradeAmount }}</uni-td>
					<uni-td align="center">{{ item.finishReturnQuality }}</uni-td>
					<uni-td align="center">{{ item.returnWaybillNum }}</uni-td>
					<uni-td align="center">{{ item.returnTradeAmount }}</uni-td>
					<uni-td align="center">{{ item.createBy }}</uni-td>
					<uni-td align="center">{{ item.timeFrame }}</uni-td>
				</uni-tr>
			</uni-table>
			<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" />
		</view> -->
		<scroll-view v-if="list.length>0" scroll-y="true" show :style="'height:' + scrollH + 'px;'" @scrolltolower="scrolltolower()">
			<view v-for="(item,index) in list" :key="index" style="background-color: #ffffff;margin: 10px;padding: 15px;border-radius: 6px;">
				<view style="display: flex;justify-content: space-between;">
					<text style="font-size: 14px;font-weight: bold;">{{item.goodsName}}</text>
					<text>{{item.timeFrame}}</text>
				</view>
				<view>
					<text>总出货量（吨）：{{item.totalShipQuality}}</text>
					<text style="margin-left: 20px;">完成出货量（吨）：{{item.finishShipQuality}}</text>
				</view>
				<view>
					<text>交易额（万元）:{{item.tradeAmount}}</text>
				</view>
			</view>
			<uni-load-more status="more" :status="loadMoreStatus" @clickLoadMore="scrolltolower()"></uni-load-more>
			<view style="height: 100px;"></view>
		</scroll-view>
		<view v-else>
			<image src="../../../../static/none.png" style="height: 260px;width: 260px;display: block;margin: 0 auto;padding-top: 50px;"></image>
			<view style="display: flex;justify-content: center;align-items: center;">
				暂无数据
			</view>
		</view>
	</div>
</template>

<script>
	import {
		transportStatistics
	} from '@/api/system/businessStatistics.js'
	
	import {getDicts} from '@/api/system/dict.js'
	export default {
		props: {
			data: {
				type: Object,
				default: {}
			},
			time: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				scrollH: 700,
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				
				formData: {
					goodsName: '',
					goodsType: '',
					endDate: undefined,
					startDate: undefined
				},
				list: [],
				//日期范围
				range: [],
				//下拉框 ->货物类型
				goodsType: [],
				//上拉触底节流标识
				flag:true,
				//加载更多
				loadMoreStatus:'more',
			}
		},
		watch: {
			data: {
			　　handler(newValue, oldValue) {
			　　　　this.formData=newValue
				this.searchLog()
			　　},
			　　deep: true
			},
			time(newValue, oldValue) {
				this.range=newValue
				this.searchLog()
			},
		},
		onLoad(e) {
		    uni.getSystemInfo({
		        success: res => {
		            this.scrollH = res.windowHeight-87;
		        }
		    });
		},
		created() {
			this.getList()
			//获取货物类型下拉框
			getDicts('goods_type').then(res=>{
				this.goodsType=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
			})
		},
		methods: {
			// 触底的时候请求数据，即为上拉加载更多
			scrolltolower(){
				this.loadMoreStatus='loading'
				if(this.flag){
				    setTimeout(()=>{
						this.pageSize+=10;
						this.getList()
				        this.flag = true;
				    },1000);
				}
				this.flag = false;
			},
			async getList() {
				let data = {
					goodsName: this.formData.goodsName,
					goodsType: this.formData.goodsType,
					pageNum: this.pageCurrent,
					pageSize: this.pageSize,
					startDate: this.range[0],
					endDate: this.range[1]
				}
				this.loading = true
				await transportStatistics(data).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.list = res.rows
						this.loadMoreStatus=res.rows.length===this.pageSize?'more':'noMore'
						this.total = res.total
						this.loading = false
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			searchLog() {
				this.pageCurrent=1
				this.pageSize=10
				this.getList()
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.pageCurrent=e.current
				this.getList()
			},
		},
	}
</script>

<style scoped>

</style>